<template>
		<div ref="fullscreenElement">
			 <div class="header">
				 <h3>{{examName}}-{{examInfo.coursesName}}</h3>
				 <span>模板管理</span>
				 <p>
					 <b @click="toggleFullscreen"><img src="../../assets/image/school/qp.png" alt="">{{ isFullscreen ? "退出全屏" : "全屏(F11)" }}</b>
					 <em @click="$router.push('/examoverview')">退出</em>
				 </p>
			 </div>
			 <div class="tabNav">
				 <div class="searchlist">
				 	<router-link to="/templateinformation" active-class="hover">模板信息及上传</router-link>
				 	<router-link to="/horizontalpositioning" active-class="hover">水平定位</router-link>
				 	<router-link to="/locationarea" active-class="hover">定位区</router-link>
				 	<router-link to="/admissionticketnumberarea" active-class="hover">准考证号区</router-link>
				 	<router-link to="/objectivequestionarea" active-class="hover">客观题区</router-link>
				 	<router-link to="/subjectivequestions" active-class="hover">主观题区</router-link>
				 </div>
				 <div class="boxsetetid">
				 	<el-select v-model="pagevale" placeholder="请选择" @change="pagevalueindex">
				 	    <el-option
				 	      v-for="item in modelobj.templateImages"
				 	      :key="item.page"
				 	      :label="item.page"
				 	      :value="item.page">
				 	    </el-option>
				 	</el-select>
				 	<el-button @click="modelsave" v-preventReClick="2000">一键保存</el-button>
				 	 <span>复用其他考试模板</span>
				 </div>
			 </div>
			 <div>
				 <div class="cropperBox" >
					 <div class="cropperImageset">
						 <ImageSelector ref="childComp" :pagevale="pagevale" :imageUrllist="modelobj.templateImages" @updateMarkList="handleUpdateMarkList" @modeltype="modeltype" :modelarealistcavans="modelarealistcavans" @objbasicparameters="objbasicparameters" @smallpoints="smallpoints" @refreshdata="refreshdata" @editContent="editContent"></ImageSelector>	
					 </div>
					 <div class="uploadcardInfo" v-if="editmodelishow">
						 <ul>
							 <li>
								 <span>圈选框为：</span>
								 <el-select v-model="questiontype" placeholder="请选择" @change="questionchange">
								     <el-option
								       v-for="item in questionclassifylist"
								       :key="item.id"
								       :label="item.name"
								       :value="item.id">
								     </el-option>
								 </el-select>
							 </li>
							 <li>
								 <span>卷面满分：</span>
								 100分(80分客观题+20分)
							 </li>
							 <li>
								 <span>题号排序：</span>
								  <el-select v-model="examclassify" placeholder="请选择" @change="modeltypetab">
									 <el-option
									   v-for="item in questionlistbox"
									   :key="item.id"
									   :label="item.name"
									   :value="item.id">
									 </el-option>
								   </el-select>
							 </li>
							 <!-- <li>
								<span>考号位数：</span>
								<el-select v-model="examNumber" placeholder="4-22">
									 <el-option
									   v-for="item in examNumberlist"
									   :key="item"
									   :label="item"
									   :value="item">
									 </el-option>
								</el-select>
							 </li> -->
							 <li>
								<span>包含题号：</span>
								<el-input type="textarea" v-model="includeNumberquestion"></el-input>
							 </li>
						 </ul>
						 <div >
							 <h3 style="border:none;border-top:solid 1px #D8E4F0;margin-top:25px">手动调整</h3>
							 <ul>
								 <li>
									 <span>选项排列：</span>
									 <el-radio-group v-model="selectradio">
										 <el-radio :label="1">横排</el-radio>
										 <el-radio :label="2">竖排</el-radio>
									 </el-radio-group>
								 </li>
								 <li>
									 <span>填涂框高</span>
									 <el-input-number v-model="fillinWidth" @change="handleChange" label="请输入"></el-input-number>
								 </li>
								 <li>
									 <span>填涂框宽</span>
									 <el-input-number v-model="fillinHeight" @change="handleChange" label="请输入"></el-input-number>
								 </li>
								 <li>
									 <span>间隔高度</span>
									 <el-input-number v-model="intervalWidth" @change="handleChange" label="请输入"></el-input-number>
								 </li>
								 <li>
									 <span>间隔宽度</span>
									 <el-input-number v-model="intervalHeight" @change="handleChange" label="请输入"></el-input-number>
								 </li>
							 </ul>
						 </div>
						 <div class="examboxbutton1">
							 <!-- <el-button @click="modelsave">保存</el-button> -->
							 <!-- <el-button @click="canceleditbox">取消</el-button> -->
						 </div>
					 </div>
				 </div>
			 </div>
		</div>
</template>

<script>
import ImageSelector from '../../components/school/objectivearea.vue'  //切图
import { get, post, del, put } from '../../request/api.js'
export default {
  name: 'App',
  data(){
	return{
		navbar:[
			{
				name:'模板信息及上传',
				id:0,
			},
			{
				name:'水平定位',
				id:1,
			},
			{
				name:'定位区',
				id:2,
			},
			{
				name:'准考证号区',
				id:3,
			},
			{
				name:'客观题区',
				id:4,
			},
			{
				name:'主观题区',
				id:5,
			}
		],
		tabnavindex:0,
		examclassifylist:['条形码','涂点','手写'],
		examNumber:'',
		examNumberlist:[4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22],
		cardNumber:2,
		cardNumberlist:[2,4,6],
		cardColor:'',
		cardColorlist:['黑色','灰色','彩色'],
		examdpi:'',
		examdpilist:[150,200,300],
		images: [],
		questiontype:'',
		questionList:[
			{
				name:'定位点',
				id:1
			},
			{
				name:'文字定位',
				id:2
			}
		],
		
		selectradio:1,
		fillinWidth:0,
		fillinHeight:0,
		intervalWidth:0,
		intervalHeight:0,
		modelobj:{
		  id:0,
		  examId:0,
		  examCourseId:0,
		  examNoLength:4,
		  answerCardPages:2,
		  status:0,
		  templateImages: []
		},
		moduleImageurl:{},
		templateId:'',//模板id
		examCourseId:'',//考试科目id
		modeldata:{
			templateId: 0,
			examCourseId: 0,
			templateAreaType:3
		},
		positioningare:{
			id: 0,
			templateId: 0,
			templateAreaType: 0,
			templateCuttingRegion:[]
		},
		modeltypequestion:'',
		modelarealist:[],
		modelarealistcavans:[],
		editmodelishow:false,
		pagevale:1,
		modelenews:[],
		typemodle :'',
		basicparametersdata:{},
		basicparametersdataarray:[],
		options:[],
		examName:'',
		examInfo:{},
		pointlist:[],
		questionclassifylist:[],
		questionlistbox:[
				  {
					  name:'题号横排',
					  id:'1'
				  },
				  {
					  name:'题号竖排',
					  id:'2'
				  }
		],
		examclassify:'1,2',
		includeNumberquestion:'',
		editishow:false,
		newvalelist:[],
		isFullscreen: false, // 当前是否处于全屏状态
	}  
  },
  mounted() {
	  // 监听全屏状态变化
	  document.onfullscreenchange = this.handleFullscreenChange;
  	this.examInfo = JSON.parse(sessionStorage.getItem('examInfo'))
	this.examName = sessionStorage.getItem('examName')
  	this.examCourseId = this.examInfo.id
  	this.modeldata.examCourseId=this.examInfo.id
  	this.modeltab()
	this.questionlistclassify()
	this.initDrag()
  },
  methods:{
	  questionlistclassify(){
	  		 get('/questionrules/list')
	  		  .then(res=>{
	  			  if(res.code==200){
	  				  this.questionclassifylist = res.data.filter(item=>item.questionType==2)
	  			  }else{
	  				 this.$message.error(res.message);  
	  			  }
	  		  })
	  		  .catch(error=>{
	  			  this.$message.error(error.message); 
	  		  })
	  },
	  editContent(data){
	  		  this.editmodelishow = data.ishow
			  let editcontent = this.modelarealist.templateCuttingRegion.filter(item=>item.id==data.id)
			  //console.info('编辑按钮被点击',editcontent)
		  this.questiontype= data.questionRulesId
		  this.positioningare.templateCuttingRegion = editcontent
		  this.examclassify = `${data.questionArrangement}`
		  this.selectradio = data.optionArrangement
		  this.includeNumberquestion = data.includedNumbers
			  this.editishow=true
	  },
	  questionchange(data){
	  		  // this.qiehuanzhiquestiontype = data
	  		  this.positioningare.templateCuttingRegion[0].templateQuestion.questionRulesId = data
	  },
	  smallpoints(data){
		  //console.info('data',data)
		  this.pointlist = data
	  },
	  pagevalueindex(val){
	  	this.pagevale = val
	  	this.modelinfo(this.templateId)
	  },
	  modeltype(data){
		  this.modeltypequestion = data
	  },
	 async handleUpdateMarkList(newVal) {
		 this.newvalelist=newVal
	     // try {
	     //     let newarray = newVal.filter(item => !item.id);
	     //     const currentTemplateId = this.modelobj.templateImages[this.pagevale - 1].templateId;
	         
	     //     // 使用 Promise.all 处理所有项目
	     //     const processedItems = await Promise.all(newarray.map(async (item, index) => {
	     //         //console.info('Processing item:', item);
	             
	     //         // 等待获取 questionItems
	     //         const templateQuestion = await new Promise(resolve => {
	     //             setTimeout(() => {
	     //                 const items = item.templateQuestion || {};
	     //                 //console.info('Got question items:', items);
	     //                 resolve(items);
	     //             }, 1500);
	     //         });
	             
	     //         return {
	     //             id: item.id?item.id:0,
	     //             templateId: currentTemplateId,
	     //             templatePointType: 6,
	     //             page: this.pagevale,
	     //             width: item.w,
	     //             height: item.h,
	     //             x: item.x,
	     //             y: item.y,
	     //             templateQuestion
	     //         };
	     //     }));
	         
	     //     // 更新数据
	     //     this.positioningare.templateCuttingRegion = processedItems;
	         
	     // } catch (error) {
	     //     console.error('Error processing items:', error);
	     //     this.$message.error('处理数据时出错');
	     // }
	 },
	   refreshdata(){
		   this.modeltab()
	   },
	  // 获取模板信息
	  modelinfo(id){
		  this.modeldata.templateId = id
	  		post('/template/cuttingregion/area', this.modeldata)
	  		    .then(res => {
	  		        if (res.code == 200) {
	  		            if (res.data && res.data.templateCuttingRegion !== null) {
	  		                this.modelarealist = res.data;
	  		
	  		                // 构建 modelarealistcavans
							let imgid=this.modelenews[this.pagevale-1].id
	  		                this.modelarealistcavans = res.data.templateCuttingRegion
	  		                    .filter(item => item.page === this.pagevale)
	  		                    .map(item => ({
	  		                        w: item.width,
	  		                        h: item.height,
	  		                        x: item.x,
	  		                        y: item.y,
	  		                        id: item.id,
	  		                        templatePointType: item.templatePointType,
	  		                        templateId: item.templateId,
									includedNumbers:item.templateQuestion.includedNumbers,
									optionArrangement:item.templateQuestion.optionArrangement,
									questionArrangement:item.templateQuestion.questionArrangement,
									questionRulesId:item.templateQuestion.questionRulesId,
									screenshotNo:item.templateQuestion.screenshotNo,
									templateCuttingRegionId:item.templateQuestion.templateCuttingRegionId,
									templateImageid:imgid,
									areaType:3,
	  		                        options: (item.templateQuestion.questionItems || [])
	  		                            .flatMap(questionItem => (questionItem.points || []))
	  		                            .map(pad => ({
	  		                                w: pad.width || 0,
	  		                                h: pad.height || 0,
	  		                                x: pad.x || 0,
	  		                                y: pad.y || 0,
	  		                                templateQuestionItemId: pad.templateQuestionItemId || null
	  		                            }))
	  		                    }));
	  		
	  		                // //console.info('Processed modelarealistcavans:', this.modelarealistcavans);
	  		            } else {
	  		                this.modelarealistcavans = [];
	  		                console.warn('No templateCuttingRegion data found in response.');
	  		            }
	  		        } else {
	  		            this.$message.error(res.message);
	  		        }
	  		    });
	  		  // .catch(error=>{
	  			 //  this.$message.error(error.message); 
	  		  // })
	  },
	// 获取模板
	modeltab(){
		const url = `/template/examcourse/${this.examInfo.id}`;
		get(url)
		.then(res => {
			if(res.code==200){
				this.modelobj = res.data
				this.modelenews = res.data.templateImages.sort((a, b) => a.page - b.page)
				this.templateId=res.data.templateImages[0].templateId
				this.modelinfo(res.data.templateImages[0].templateId)
			}
		})
	},
	// 取消模板
	modeluploadcancel(){
		
	},
	zdsbmodel(){
		
	},
	//客观题基础参数
	objbasicparameters(data){
		// this.basicparametersdataarray=[]
		this.basicparametersdata = data
		this.basicparametersdataarray.push(this.basicparametersdata)
		this.editishow=false
		this.editmodelishow = false
	},
	canceleditbox(){
			    this.editishow=false
				this.editmodelishow = false
	},
	// 保存圈选区域
	modelsave(){
		this.positioningare.templateId = this.modelobj.templateImages[0].templateId
		this.templateId = this.modelobj.templateImages[0].templateId
		this.positioningare.templateAreaType = 3
		if(this.editishow){
			// //console.info(this.positioningare.templateCuttingRegion[0])
			this.positioningare.id=this.positioningare.templateCuttingRegion[0].id
			// 保持原有的examNumber对象
			const originalExamNumber = this.positioningare.templateCuttingRegion[0].templateQuestion || {};
			
			// 更新examNumber，合并原有属性和新属性
			this.positioningare.templateCuttingRegion[0].templateQuestion = {
			  ...originalExamNumber, // 保持原有属性
			  templateCuttingRegionId: originalExamNumber.templateCuttingRegionId || 0,
			  templateCuttingRegion: originalExamNumber.templateCuttingRegion || null,
			  // 更新需要修改的值
			  questionRulesId:this.questiontype,
			  questionArrangement:this.examclassify,
			  optionArrangement: this.selectradio,
			  includedNumbers:this.includeNumberquestion,
			  width: this.fillinWidth,
			  height: this.fillinHeight,
			  intervalWidth: this.intervalWidth,
			  intervalHeight: this.intervalHeight,
			  id: originalExamNumber.id || 0
			}
		}
		//console.info(this.positioningare)
		// return false
		post('/template/cuttingregion/save',this.positioningare)
		.then(res=>{
			if(res.code==200){
				this.$refs.childComp.clearInputValue();
				this.$refs.childComp.questionlistclassify()
				this.modelinfo(this.templateId)
				this.positioningare.templateCuttingRegion=[]
				this.pointlist=[]
				this.basicparametersdataarray=[]
				this.$message.success('保存成功');
			}else{
				this.$message.error(res.message); 
			}
		})
		// .catch(error=>{
		// 	this.$message.error(error.message); 
		// })
	},
	initDrag() {
	  const draggableElement = this.$refs.childComp.getDraggableElement();
	
	  let isDragging = false; // 控制是否处于拖拽状态
	  let offsetX = 0;
	  let offsetY = 0;
	
	  // 拖拽开始
	  draggableElement.addEventListener('mousedown', (event) => {
	    // 检查鼠标点击的位置是否在可交互元素上
	    // const targetElement = event.target;
	    // if (
	    //   targetElement.tagName.toLowerCase() === 'input' ||
	    //   targetElement.tagName.toLowerCase() === 'button' ||
	    //   targetElement.tagName.toLowerCase() === 'a' ||
	    //   targetElement.isContentEditable // 检查是否是可编辑内容
	    // ) {
	    //   // 如果点击的是可交互元素，不启动拖拽逻辑
	    //   return;
	    // }
	
	    isDragging = true; // 标记拖拽开始
	    offsetX = event.clientX - draggableElement.getBoundingClientRect().left;
	    offsetY = event.clientY - draggableElement.getBoundingClientRect().top;
	
	    // 禁用所有点击事件
	    document.addEventListener('click', preventClick, { capture: true });
	
	    document.addEventListener('mousemove', onDrag);
	    document.addEventListener('mouseup', stopDrag);
	  });
	
	  // 拖拽逻辑
	  const onDrag = (event) => {
	    if (isDragging) {
	      const x = event.clientX - offsetX;
	      const y = event.clientY - offsetY;
	
	      // 获取屏幕边界
	      const screenWidth = window.innerWidth;
	      const screenHeight = window.innerHeight;
	      const elementWidth = draggableElement.offsetWidth;
	      const elementHeight = draggableElement.offsetHeight;
	
	      // 计算边界限制
	      const minX = 0;
	      const maxX = screenWidth - elementWidth;
	      const minY = 0;
	      const maxY = screenHeight - elementHeight;
	
	      // 限制位置
	      const clampedX = Math.max(minX, Math.min(maxX, x));
	      const clampedY = Math.max(minY, Math.min(maxY, y));
	
	      draggableElement.style.left = `${clampedX}px`;
	      draggableElement.style.top = `${clampedY}px`;
	    }
	  };
	
	  // 拖拽结束
	  const stopDrag = () => {
	    isDragging = false; // 标记拖拽结束
	
	    // 恢复所有点击事件
	    document.removeEventListener('click', preventClick, { capture: true });
	
	    document.removeEventListener('mousemove', onDrag);
	    document.removeEventListener('mouseup', stopDrag);
	  };
	
	  // 阻止点击事件的函数
	  const preventClick = (event) => {
	    event.preventDefault();
	    event.stopPropagation();
	  };
	},
	// 切换全屏
	toggleFullscreen() {
	  if (!document.fullscreenEnabled) {
	    alert("您的浏览器不支持全屏功能！");
	    return;
	  }
	
	  if (this.isFullscreen) {
	    // 退出全屏
	    document.exitFullscreen();
		this.$refs.fullscreenElement.style.overflow = 'auto';
	  } else {
	    // 进入全屏
	    this.$refs.fullscreenElement.requestFullscreen();
		this.$refs.fullscreenElement.style.overflow = 'auto';
	  }
	},
	// 处理全屏状态变化
	handleFullscreenChange() {
	  this.isFullscreen = !!document.fullscreenElement;
	}
  },
  watch:{
	newvalelist:{
		handler:async function(val, old){
			let newarray = val.filter(item => !item.id);
			if(newarray.length>0){
				try {
				    let newarray = val.filter(item => !item.id);
				    const currentTemplateId = this.modelobj.templateImages[this.pagevale - 1].templateId;
				    
				    // 使用 Promise.all 处理所有项目
				    const processedItems = await Promise.all(newarray.map(async (item, index) => {
				        //console.info('Processing item:', item);
				        
				        // 等待获取 questionItems
				        const templateQuestion = await new Promise(resolve => {
				            setTimeout(() => {
				                const items = item.templateQuestion || {};
				                //console.info('Got question items:', items);
				                resolve(items);
				            }, 1500);
				        });
				        
				        return {
				            id: item.id?item.id:0,
				            templateId: currentTemplateId,
				            templatePointType: 6,
				            page: this.pagevale,
				            width: item.w,
				            height: item.h,
				            x: item.x,
				            y: item.y,
				            templateQuestion
				        };
				    }));
				    
				    // 更新数据
					this.positioningare.id=0
				    this.positioningare.templateCuttingRegion = processedItems;
				    
				} catch (error) {
				    console.error('Error processing items:', error);
				    this.$message.error('处理数据时出错');
				}
			}else{
				//console.info('ssssss')
				const submitData = [];
				// 遍历 newVal 数组
				val.forEach(newItem => {
					this.positioningare.id=newItem.id
				  // 查找 templateCuttingRegion 中具有相同 id 的项
				  const oldItem = this.modelarealist.templateCuttingRegion.find(item => item.id === newItem.id);
				
				  // 如果找到且 w, h, x, y 有不同
				  if (oldItem && (newItem.w !== oldItem.width || newItem.h !== oldItem.height || newItem.x !== oldItem.x || newItem.y !== oldItem.y)) {
				    // 创建一个新的对象，用于提交
				    const updatedItem = {
				      ...oldItem,
				      width: newItem.w,
				      height: newItem.h,
				      x: newItem.x,
				      y: newItem.y,
					  templateQuestion: {
					          ...oldItem.templateQuestion, // 保留 templateQuestion 的其他属性
					          questionItems: newItem.points // 更新 questionItems
					        }
				    };
				    // 将新对象添加到 submitData 数组中
				    submitData.push(updatedItem);
				  }
				});
				
				this.positioningare.templateCuttingRegion = submitData
				// //console.info(submitData)
				// //console.info(this.positioningare)
			}
		},
		deep:true,
	}
  },
  components: {
    ImageSelector
  },
  beforeRouteLeave(to, from, next) {
  	if(this.telemplatelist&&this.modelarealist.templateCuttingRegion){
		if(this.newvalelist.length!=this.modelarealist.templateCuttingRegion.length){
			// 如果数组不同，阻止跳转并提示用户
			this.$confirm('有未保存的操作，是否继续', '提示', {
			  confirmButtonText: '确定',
			  cancelButtonText: '取消',
			  type: 'warning'
			}).then(() => {
				next();
			}).catch(() => {
				next(false);     
			});
			next(false); // 阻止跳转
		}else{
			// 如果数组长度相同，比较数组中的每个元素
			const isSame = this.newvalelist.every((item, index) => {
				const modelarealistItem = this.modelarealist.templateCuttingRegion[index];
				return item.w === modelarealistItem.width
					&& item.h === modelarealistItem.height
					&& item.x === modelarealistItem.x
					&& item.y === modelarealistItem.y
					&& item.templatePointType === modelarealistItem.templatePointType;
			});
			if (isSame) {
				// 如果所有元素都相同，直接跳转
				next();
			} else {
				// 如果有任何一个元素不同，阻止跳转并提示用户
				this.$confirm('有未保存的操作，是否继续', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					next();
				}).catch(() => {
					next(false);     
				});
				next(false); // 阻止跳转
			}
		}
	}else{
		next()
	}
  }
}
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
}
.header{
	padding:0 40px;
	height:48px;
	padding:0 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color:#fff;
	background:#2379F6;
	font-size:16px;
}
.header h3{
	font-weight: normal;
	font-size:16px;
}
.header p{
	display: flex;
}
.header p b{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 134px;
	height: 32px;
	background: rgba(255,255,255,0.1);
	border-radius: 17px;
	border: 1px solid #FFFFFF;
	text-align: center;
	line-height:32px;
	cursor: pointer;
	margin-right:14px;
}
.header p b img{
	width:16px;
	margin-right:8px;
}
.header p em{
	display: inline-block;
	width: 76px;
	height: 32px;
	background: #FFFFFF;
	border-radius: 17px;
	border: 1px solid #FFFFFF;
	color:#2379F6;
	text-align: center;
	line-height:32px;
	cursor:pointer
}
.tabNav{
	padding:0 40px;
	height:54px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding:0 24px 0 10px;
	background:#fff;
}
.tabNav ul{
	display: flex;
	align-items: center;
	font-size:14px;
}
.tabNav ul li{
	padding:0 20px;
	cursor: pointer;
	line-height:38px;
	color:#557292;
	position:relative
}
.tabNav ul li:hover,.tabNav ul li.hover{
	color:#2A303B;
}
.tabNav ul li:hover::after,.tabNav ul li.hover::after{
	content:'';
	width: 24px;
	height: 4px;
	background: #295CFF;
	border-radius: 2px;
	position:absolute;
	left:50%;
	transform: translateX(-50%);
	bottom:0
}
.tabNav span{
	display: inline-block;
	width: 140px;
	height: 34px;
	background: #F2F6FB;
	border-radius: 10px;
	border: 1px solid #295CFF;
	font-weight: 500;
	font-size: 14px;
	color: #295CFF;
	text-align: center;
	line-height:34px;
	cursor: pointer;
}
/* 上传 */
.uploadMarks{
	box-sizing: border-box;
	background:#F4F7FD;
	width:100vw;
	height:calc(100vh - 102px);
	position: relative;
}
.smcsbutton{
	width: 124px;
	height: 34px;
	background: #2379F6;
	border-radius: 10px;
	font-size: 14px;
	color: #FFFFFF;
	text-align: center;
	border:none;
	/* margin:24px 0 0 24px; */
	position: absolute;
	padding:0;
	left:24px;
	top:24px;
}
.boxcenter{
	display: flex;
	justify-content: space-between;
}
.uploadcardInfo{
	height:calc(100vh - 102px);
	background:#fff;
	position:relative
}
.examboxbutton{
	width:100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	padding:0 15px;
	height: 54px;
	background: #E8F0FA;
	position:absolute;
	left:0;
	bottom:0;
}
.examboxbutton >>>  .el-button{
	width: 124px;
	height: 34px;
	border-radius:10px;
	padding:0;
	margin:0;
	font-size:12px;
	border: 1px solid #295CFF;
	color:#295CFF;
	background:none;
}
.examboxbutton >>>  .el-button:first-child{
	background:#295CFF;
	border: 1px solid #295CFF;
	color:#fff;
}
.examboxbutton >>>  .el-button:nth-child(2){
	margin:0 8px;
}
.examboxbutton1{
	width:100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	padding:0 15px;
	height: 54px;
	background: #E8F0FA;
	position:absolute;
	left:0;
	bottom:0;
	justify-content: center;
}
.examboxbutton1 >>>  .el-button{
	width: 124px;
	height: 34px;
	border-radius:10px;
	padding:0;
	margin:0;
	font-size:12px;
	border: 1px solid #295CFF;
	color:#295CFF;
	background:none;
}
.examboxbutton1 >>>  .el-button:first-child{
	background:#295CFF;
	border: 1px solid #295CFF;
	color:#fff;
}
.examboxbutton1 >>>  .el-button:nth-child(2){
	margin:0 8px;
}
.uploadcardInfo h3{
	line-height:67px;
	border-bottom:solid 1px #D8E4F0;
	padding:0 24px;
	color:#2A303B;
	font-weight:normal
}
.uploadcardInfo ul li{
	display: flex;
	align-items: center;
	color:#8E96A4;
	font-size:16px;
	padding:0 24px;
	margin-top:24px;
}
.uploadcardInfo ul li span{
	color:#8E96A4;
	width:120px;
}
.uploadcardInfo ul li >>> .el-input__inner{
	border-radius:10px;
}
.uploadcardInfo ul li >>> .el-textarea{
	width:calc(100% - 64px)
}
.uploadCardimage{
	width:calc(100% - 460px);
	height:calc(100vh - 102px);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	position:relative;
}
.uploadCardimage span{
	display: block;
	width:100%;
	text-align: center;
}
.uploaddiv{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.uploaddivattention{
	font-size: 14px;
	color: #B3B8C2;
}
.cropperBox{
	height:calc(100vh - 102px);
	display: flex;
}
.cropperImageset{
	width:100%;
	height:calc(100vh - 102px);
	overflow:scroll;
	position: relative
}
  .image-preview img{
	  box-sizing: border-box;
	  width: 150px;
	  height: 150px;
	  background: #FFFFFF;
	  border-radius: 10px;
	  text-align: center;
	  font-size:16px;
	  color:#295CFF;
	  cursor: pointer;
	  margin:22px;
  }
  .searchlist{
  	box-sizing: border-box;
  	width:auto;padding:0 40px;
  	display: flex;
  	justify-content: space-between;
  	height: 54px;
  	background: #FFFFFF;
  	border-radius: 10px;
  	padding:0 24px;
  	align-items: center;
  }
  .searchlist{
  	padding-left:20px;
  	display: flex;
  	align-items: center;
  	justify-content: left;
  }
  .searchlist a{
  	display: block;
  	color:#557292;
  	font-size:14px;
  	/* width:100px; */
  	text-align: center;
  	position: relative;
  	line-height:52px;
  	padding:0 15px;	
  }
  .searchlist a:hover,.searchlist a.hover{
  	color:#295CFF;
  }
  .searchlist a:hover::after,.searchlist a.hover::after{
  	content:'';
  	width: 24px;
  	height: 4px;
  	background: #295CFF;
  	border-radius: 2px;
  	position: absolute;
  	left:50%;
  	transform: translateX(-50%);
  	bottom:0;
  }
  .boxsetetid{
  	  display: flex;
  	  align-items: center;
  }
  .boxsetetid >>> .el-input__inner{
  	  width:90px;
  	  height:34px;
  	  border-radius: 10px;
  	  border: 1px solid #295CFF;
  	  font-weight: 500;
  	  font-size: 14px;
  	  color: #295CFF;
  }
  .boxsetetid >>> .el-select .el-input .el-select__caret{
  	  color: #295CFF
  }
  .boxsetetid >>> .el-input__icon{
  	  line-height:34px;
  }
  .boxsetetid >>> .el-button{
  	  padding:0;
  	  width: 96px;
  	  height: 34px;
  	  background: #295CFF;
  	  border-radius: 10px;
  	  color:#fff;
  	  line-height:34px;
  	  margin:0 10px;
  }
  .breadBox >>> .el-breadcrumb__inner a,.breadBox >>> .el-breadcrumb__inner.is-link{
  	font-weight:normal
  }
  .breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner,
  .breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a,
  .breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
  .breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover{
  	font-weight:bold
  }
</style>